﻿@using EncomiendaMVC.Helpers
@{
    ViewBag.Title = Html.Localizar("GUIA_LIST_0000", "EN");
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" />
<link href="@Url.Content("~/Content/kendo.common.min.css")" rel="stylesheet" />

<script src="@Url.Content("~/Scripts/jquery-ui-1.8.24.min.js")"></script>
<script src="@Url.Content("~/Scripts/js/kendo.web.min.js")"></script>

<script>
    $(document).ready(function () {
        $("#Buscar").click(function () {
            var FechaGuiaIni = $("#FechaGuiaIni").val();
            var FechaGuiaFin = $("#FechaGuiaFin").val();
            var FechaSalidaIni = $("#FechaSalidaIni").val();
            var FechaSalidaFin = $("#FechaSalidaFin").val();
            var NumeroGuia = $("#NumeroGuia").val();
            var Empio = $("#Empio").val();
            var Estado = $("#Estado").val();
            var NombresPE = $("#NombresPE").val();
            var PaternoPE = $("#PaternoPE").val();
            var TelefonoPE = $("#TelefonoPE").val();
            var NombresJP = $("#NombresJP").val();
            var PaternoJP = $("#PaternoJP").val();
            var TelefonoJP = $("#TelefonoJP").val();

            $.getJSON("/Guia/GuiaBuscar", {
                FechaGuiaIni: FechaGuiaIni, FechaGuiaFin: FechaGuiaFin,
                FechaSalidaIni: FechaSalidaIni, FechaSalidaFin: FechaSalidaFin,
                NumeroGuia: NumeroGuia, Empio: Empio, Estado: Estado,
                NombresPE: NombresPE, PaternoPE: PaternoPE, TelefonoPE: TelefonoPE,
                NombresJP: NombresJP, PaternoJP: PaternoJP, TelefonoJP: TelefonoJP
            }, function (resultado) {
                //alert(resultado);
                $("#grGuias").kendoGrid({
                    dataSource: {
                        data: resultado,
                        pageSize: 9
                    },
                    grupable: false,
                    sortable: false,
                    pageable: true,
                    columns: [
                        { field: "ID", width: 60, title: "<center>ID</center>", attributes: { style: "text-align: right;" } },
                        { field: "Nota", width: 60, title: "<center>OBS.</center>", attributes: { style: "text-align: center;" } },
                        { field: "Estado", width: 80, title: "<center>ESTADO</center>", attributes: { style: "text-align: center;" } },
                        { field: "Disponible", width: 90, title: "<center>RECEPCION</center>", attributes: { style: "text-align: center;" } },
                        { field: "Tipo", width: 130, title: "<center>TIPO</center>", attributes: { style: "text-align: center;" } },
                        { field: "FechaEntregado", width: 100, title: "<center>F. DESPACHO</center>", attributes: { style: "text-align: center;" }, template: "#= kendo.toString(kendo.parseDate(FechaEntregado, 'yyyy-MM-dd'), 'dd/MM/yyyy') #" },
                        { field: "Empio", width: 110, title: "<center>EMPIO</center>", attributes: { style: "text-align: center;" } },
                        { field: "Numero", width: 70, title: "<center>GUIA</center>", attributes: { style: "text-align: center;" } },
                        { field: "ClientePeru", width: 220, title: "<center>REMITENTE [PERU]</center>", attributes: { style: "text-align: left;" } },
                        { field: "ClienteJapon", width: 220, title: "<center>DESTINATARIO [JAPON]</center>", attributes: { style: "text-align: left;" } },
                        { field: "FechaSalida", width: 100, title: "<center>F. SALIDA</center>", attributes: { style: "text-align: center;" }, template: "#= kendo.toString(kendo.parseDate(FechaSalida, 'yyyy-MM-dd'), 'dd/MM/yyyy') #" },
                        { field: "Descripcion", width: 180, title: "<center>DESCRIPCION</center>", attributes: { style: "text-align: left;" } },
                        { field: "Peso", width: 70, title: "<center>PESO</center>", attributes: { style: "text-align: right;" } },
                        { field: "TotalPagar", width: 100, title: "<center>A PAGAR (¥)</center>", attributes: { style: "text-align: right;" } },
                        { field: "Fecha", width: 100, title: "<center>F. CREACION</center>", attributes: { style: "text-align: center;" }, template: "#= kendo.toString(kendo.parseDate(Fecha, 'yyyy-MM-dd'), 'dd/MM/yyyy') #" },
                        { title: "&nbsp;", width: 40,
                          template: function (dataItem) {
                              return "<input type='button' value='Ver' onclick='mostrar(" + kendo.htmlEncode(dataItem.ID) + ")' style='text-transform:none;-webkit-box-shadow:rgba(0,0,0,0.0.1) 0 1px 0 0; -moz-box-shadow:rgba(0,0,0,0.0.1) 0 1px 0 0; box-shadow:rgba(0,0,0,0.0.1) 0 1px 0 0; background-color:#5B74A8; border:1px solid #29447E; font-family:Tahoma,Verdana,Arial,sans-serif; font-size:12px; font-weight:700; padding:2px 6px; height:28px; color:#fff; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;' />";
                          }
                        },
                        { title: "Archivos", width: 40,
                          template: function (dataItem) {
                              return "<input type='button' value='Ver' onclick='mostrarFile(" + kendo.htmlEncode(dataItem.ID) + ")' style='text-transform:none;-webkit-box-shadow:rgba(0,0,0,0.0.1) 0 1px 0 0; -moz-box-shadow:rgba(0,0,0,0.0.1) 0 1px 0 0; box-shadow:rgba(0,0,0,0.0.1) 0 1px 0 0; background-color:#5B74A8; border:1px solid #29447E; font-family:Tahoma,Verdana,Arial,sans-serif; font-size:12px; font-weight:700; padding:2px 6px; height:28px; color:#fff; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;' />";
                          }
                        }
                    ]
                });
            });
        });
    });
    $(function () {
        $('#dialog').dialog({
            autoOpen: false,
            width: 900,
            resizable: false,
            title: 'Datos de la Guia',
            modal: true,
            buttons: [
                { text: "Cerrar", click: function () { $(this).dialog("close"); } }
            ]
        });
    });

    function mostrar(id) {
        $('#dialog').load("/Guia/DetalleGuia?Id=" + id,
                        function (response, status, xhr) {
                            $('#dialog').dialog('open');
                        });
    }

    function mostrarFile(id) {
        $('#dialog').load("/Guia/Files?Id=" + id,
                        function (response, status, xhr) {
                            $('#dialog').dialog('open');
                        });
    }
</script>
<h2>@Html.Localizar("GUIA_LIST_0000","EN")</h2>  |   @Html.ActionLink("Reporte", "Reporte") 
<table>
    <tr>
        <td>
            <h5>@Html.Localizar("GUIA_LIST_0001","EN")</h5>
            <input type="date" id="FechaGuiaIni" value="" class="datepicker" style="width: 120px;" />
            <input type="date" id="FechaGuiaFin" value=""  class="datepicker" style="width: 120px;" />
        </td>
        <td>
            <h5>@Html.Localizar("GUIA_LIST_0002","EN")</h5>
            <input type="date" id="FechaSalidaIni" value="" class="datepicker" style="width: 120px;" />
            <input type="date" id="FechaSalidaFin" value="" class="datepicker" style="width: 120px;" />
        </td>
        <td>
            <h5>@Html.Localizar("GUIA_LIST_0003","EN")</h5>
            <input type="text" id="NumeroGuia" placeholder="@Html.Localizar("GUIA_LIST_0007","EN")" />
            <input type="text" id="Empio" placeholder="@Html.Localizar("GUIA_LIST_0008","EN")" />
            <select id="Estado">
              <option value="">-- @Html.Localizar("GUIA_LIST_0012","EN") --</option>
              <option value="001">@Html.Localizar("GUIA_LIST_0013","EN")</option>
              <option value="002">@Html.Localizar("GUIA_LIST_0014","EN")</option>
              <option value="003">@Html.Localizar("GUIA_LIST_0015","EN")</option>
            </select>
        </td>
        <td>
            <h5>@Html.Localizar("GUIA_LIST_0004","EN")</h5>
            <input type="text" id="NombresPE" placeholder="@Html.Localizar("GUIA_LIST_0009","EN")" />
            <input type="text" id="PaternoPE" placeholder="@Html.Localizar("GUIA_LIST_0010","EN")" />
            <input type="text" id="TelefonoPE" placeholder="@Html.Localizar("GUIA_LIST_0011","EN")" />
        </td>
        <td>
            <h5>@Html.Localizar("GUIA_LIST_0005","EN")</h5>
            <input type="text" id="NombresJP" placeholder="@Html.Localizar("GUIA_LIST_0009","EN")" />
            <input type="text" id="PaternoJP" placeholder="@Html.Localizar("GUIA_LIST_0010","EN")" />
            <input type="text" id="TelefonoJP" placeholder="@Html.Localizar("GUIA_LIST_0011","EN")" />
        </td>
        <td>
            <input type="button" id="Buscar" value="@Html.Localizar("GUIA_LIST_0006","EN")" />
        </td>
    </tr>
</table>
<div id="grGuias">
</div>
<div id="dialog" title="Avance de Partida" style="overflow: hidden;">
</div>

<script>
    if (!Modernizr.inputtypes.date) {
        $('.datepicker').datepicker({
            dateFormat: 'dd/mm/yy',
            showOn: 'button',
            buttonImage: '@Url.Content("~/Images/calendar.gif")',
            buttonImageOnly: true,
        });
    }
</script>